<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/dist/css/layui.css">
    <script src="/static/dist/layui.js"></script>
    <title>商品详情页面</title>
    <style>
        .layui-form-item .layui-input-block {
            display: flex;
            align-items: center;
        }

        .layui-form {
            border-top: 20px;
            padding-top: 20px;
        }

        #name {
            font-size: 20px;
        }

        #price {
            font-size: 32px;
            color: rgba(255,95,56,1);
            margin-bottom: 10px;
        }

        #outline {
            font-size: 20px;
            color: #666;
            margin-top: 10px;
        }

        #productImage {
            max-height: 400px;
        }

        .product-label{
            font-size: 16px;
            font-weight: 700;
        }

        .product-value{
            font-size: 16px;
            font-weight: 700;
        }

        .image-container {
            display: flex;
            justify-content: center;
        }

        .product-row.image-container {
            margin-top: 50px;
        }

        .comment-form {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        #comment-input {
            width: 100ch;
            margin-right: 10px;
            resize: none;
        }

        .userspeak {
            font-size: 16px;
            font-weight: 700;
        }

    </style>
</head>
<body>

<div class="layui-main">
    <div class="layui-col-md5">
        <img id="productImage" src="" alt="暂无">
    </div>
    <div class="layui-col-md7">
        <form class="layui-form" action="">
            <br><br>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-size: 32px"><strong>名称</strong></label>
                <div class="layui-input-block">
                    <span id="name" class="layui-form-text"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-size: 32px"><strong>卖点</strong></label>
                <div class="layui-input-block">
                    <span id="outline" class="layui-form-text"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-size: 32px"><strong>价格</strong></label>
                <div class="layui-input-block">
                    <span id="price" class="layui-form-text"></span>
                </div>
            </div>
            <br><br><br><br>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-size: 32px"><strong>数量</strong></label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="font-size: 24px" id="decrease">-</button>
                    <span id="number" class="layui-form-text layui-btn layui-btn-primary layui-btn-lg" style="font-size: 24px">1</span>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="font-size: 24px" id="increase">+</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div style="text-align: left">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-lg" style="border-radius: 25px 0 0 25px" id="buy">&nbsp;立即购买&nbsp;</button>
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-lg" style="border-radius: 0 25px 25px 0" id="addToCart">加入购物车</button>
                </div>
            </div>
            <!-- 隐藏域用于表单提交 -->
            <input type="hidden" id="goodIdInput" name="good_id">
            <input type="hidden" id="nameInput" name="name">
            <input type="hidden" id="priceInput" name="price">
            <input type="hidden" id="numberInput" name="number">
            <input type="hidden" id="typeInput" name="type">
            <input type="hidden" id="outlineInput" name="outline">
            <input type="hidden" id="imgUrlInput" name="img_url">
            <input type="hidden" id="linkUrlInput" name="link_url">
        </form>
    </div>

    <div class="layui-tab layui-col-md12">
        <ul class="layui-tab-title">
            <li class="layui-this">商品详情</li>
            <li>商品评价</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="product-container">
                    <div class="product-info">
                        <div class="product-row">
                            <div class="product-field">
                                <div class="layui-col-md4">
                                    <span class="product-label">品牌：</span>
                                    <span class="product-value">懒洋洋</span>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">系列：</span>
                                <span class="product-value">规格：多肉葡萄380g</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">产地：</span>
                                <span class="product-value">中国大陆</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-row">
                        <div class="product-field">
                            <div class="layui-col-md4">
                                <span class="product-label">省份：</span>
                                <span class="product-value">湖北省</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">城市：</span>
                                <span class="product-value">宜昌市</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">包装方式：</span>
                                <span class="product-value">包装</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-row">
                        <div class="product-field">
                            <div class="layui-col-md4">
                                <span class="product-label">果冻布丁种类：</span>
                                <span class="product-value">果味型果冻</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">形态：</span>
                                <span class="product-value">凝胶</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">净含量：</span>
                                <span class="product-value">380g</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-row">
                        <div class="product-field">
                            <div class="layui-col-md4">
                                <span class="product-label">蛋白质：</span>
                                <span class="product-value">0g/100g</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">能量：</span>
                                <span class="product-value">340kJ/100g</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">脂肪：</span>
                                <span class="product-value">0g/100g</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-row">
                        <div class="product-field">
                            <div class="layui-col-md4">
                                <span class="product-label">碳水化合物：</span>
                                <span class="product-value">20g/100g</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">钠：</span>
                                <span class="product-value">20mg/100g</span>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="product-row layui-col-md12 image-container">
                        <img src="/static/lyy.jpg" alt="" style="width: 586px">
                    </div>
                    <div class="product-row layui-col-md12 image-container">
                        <img src="/static/lyy1.jpg" alt="" style="width: 586px">
                    </div>
                    <div class="product-row layui-col-md12 image-container">
                        <img src="/static/lyy2.jpg" alt="" style="width: 586px">
                    </div>
                </div>
            </div>


            <div class="layui-tab-item">
                <div class="comment-container">
                    <div class="userspeak">
                        <span>懒羊羊：</span>
                        <span id="speak1"></span>
                    </div>
                    <div>味道不错还是小时候的味道，价格实惠相当的不错味道很好，也很便宜，看着干净有食欲，微辣型第三次买了，很好吃，快递超级快东西很好，和超市卖的一样，搞活动买的价格更实惠！朋友介绍来买的特别好吃是小时候的味道很大包的，吃都吃不完，分成小包的话就好了香，停不下来好吃超美味，和小时候的味道一样！吃完再拼点，超赞物美价廉，吃的根本就停不下来，而且一包的量也很大，良心有点甜，挺香的，好吃。吃多了会腻。五大包，量很多，看着很有食欲。</div>
                    <br>
                    <hr>
                    <div class="userspeak">
                        <span>沸羊羊：</span>
                        <span id="speak2"></span>
                    </div>
                    <div>看到她拆开礼盒的表情时，真的是笑我了，看着她那惊呆的样子，马上就开心的，哈哈哈。她是个大吃货，看到满满一箱的零食也惊呆了。还一直问我你这是在哪买的，零食怎么那么多包装品质非常滴不错商品分量分量很多保质期保质期都ok新鲜度很新鲜哦口感味道口味一级棒</div>
                    <br>
                    <hr>
                    <div class="userspeak">
                        <span>喜羊羊：</span>
                        <span id="speak3"></span>
                    </div>
                    <div>日期好，包装的非常好，服务也很好，快递也是非常的块的，盒子包装真的太好看了，看着就挺满足的，真心推荐，超值的，简直太令人满意了，当休闲零食吃，还是很不错的，根本不用担心吃不完会怎样怎样，因为它每个都是独立的，多种口味混装，方便吃食，也方便携带，挺不错的。</div>
                    <br>
                    <hr>
                    <div class="userspeak">
                        <span>美羊羊：</span>
                        <span id="speak4"></span>
                    </div>
                    <div>Y一大堆零食很超值，很开心又可以继续有好吃的啦！，很好吃的零食，满足不同人群的胃口，各种各样的，味道不同，包装比别的家的更好更用心朋友也说吃的小零食很不错</div>
                    <br>
                    <hr>
                    <div class="userspeak">
                        <span>暖羊羊：</span>
                        <span id="speak5"></span>
                    </div>
                    <div>零食的量也比我当时想像中的多，日期也非常的新鲜，每包都不错，符合大众的口味，因为我经常逛超市买零食，价格还是知道点的，感觉还是组合的大礼包价格要比零食店便宜不少，还送手工玫瑰花还有贺卡，真的很不错呢。</div>
                    <br>
                    <hr>
                    <div class="userspeak">
                        <span>灰太狼：</span>
                        <span id="speak6"></span>
                    </div>
                    <div>礼包收到老婆很喜欢，不仅仅礼盒够大够漂亮，休闲零食的量也比我当时想像中的要多，最最重要的日期也非常的新鲜，因为本大王经常陪老婆逛超市买休闲零食，而且都会去看生产日期和保质期</div>
                    <br>
                    <hr>
                    <div class="userspeak">
                        <span>小灰灰：</span>
                        <span id="speak7"></span>
                    </div>
                    <div>这么好吃外包装又那么好看的店为什么我现在才发现呢，后悔当初啊，早点发现就可以早点享受你们家的美食了呢，就不用每次都在想吃馋嘴的时候找不到想吃的呢，下次就锁定你们家咯。</div>
                    <br>
                    <hr>
                    <div class="userspeak">
                        <span>慢羊羊：</span>
                        <span id="speak8"></span>
                    </div>
                    <div>好朋友很喜欢哦，特别是喜欢那个包装，可爱又实用，还可以做收纳，质量也是杠杠的。特别是里面的吃的也很多，朋友吃的合不拢嘴，一直和我电话里说好喜欢我这个礼物</div>
                    <br>
                    <hr>
                    <div class="userspeak">
                        <span>红太狼：</span>
                        <span id="speak9"></span>
                    </div>
                    <div>东西收到了，太好吃了，看电视吃，吃，看书吃，吃，聊天也在吃，吃。快递很快，而且礼包也很完好，一点毛病都没有的，挺好，真是实惠又经济，感觉吃你们家的零食会上瘾的，老粉了，礼盒也非常厚实，也能做收纳。</div>
                    <br>
                    <hr>
                    <div class="comment-form">
                        <hr>
                        <textarea id="comment-input" placeholder="请输入评论内容"></textarea>
                        <button id="comment-submit" class="layui-btn">提交评论</button>
                    </div>
                    <ul id="comment-list" class="comment-list layui-timeline"></ul>
                </div>
            </div>

        </div>
    </div>
</div>

</div>

<script src="/static/js/jquery.3.6.min.js"></script>
<script>
    layui.use('jquery', function(){
        var $ = layui.jquery;
        var rate = layui.rate;

        //渲染
        var ins1 = rate.render({
            elem: '#speak1',  //绑定元素
            value: 5,
            readonly: true,
        });

        var ins1 = rate.render({
            elem: '#speak2',  //绑定元素
            value: 5,
            readonly: true,
        });

        var ins1 = rate.render({
            elem: '#speak3',  //绑定元素
            value: 4,
            readonly: true,
        });

        var ins1 = rate.render({
            elem: '#speak4',  //绑定元素
            value: 5,
            readonly: true,
        });

        var ins1 = rate.render({
            elem: '#speak5',  //绑定元素
            value: 5,
            readonly: true,
        });

        var ins1 = rate.render({
            elem: '#speak6',  //绑定元素
            value: 5,
            readonly: true,
        });

        var ins1 = rate.render({
            elem: '#speak7',  //绑定元素
            value: 5,
            readonly: true,
        });

        var ins1 = rate.render({
            elem: '#speak8',  //绑定元素
            value: 5,
            readonly: true,
        });

        var ins1 = rate.render({
            elem: '#speak9',  //绑定元素
            value: 5,
            readonly: true,
        });


        $(document).ready(function() {
            // 请求接口获取数据并填充页面元素
            function fetchAndDisplayProduct() {
                 var urlParts = window.location.href.split('/');
                 var _id = urlParts[urlParts.length - 1];
                 var ajaxURL = '/get/good/' + _id;
                $.ajax({
                    url: ajaxURL,
                    method: 'GET',
                    dataType: 'json',
                    success: function(responseData) {
                        console.log(responseData)
                        $('#goodIdInput').text(responseData.data.id)
                        $('#name').text(responseData.data.name);
                        $('#price').text(responseData.data.price);
                        $('#typeInput').text(responseData.data.type);
                        $('#outline').text(responseData.data.outline);
                        $('#productImage').attr('src', responseData.data.img_url);
                        $('#linkUrlInput').text(responseData.data.link_url);

                        // 设置隐藏域的值，用于表单提交
                        $('#goodIdInput').val(responseData.data.id)
                        $('#nameInput').val(responseData.data.name);
                        $('#priceInput').val(responseData.data.price);
                        $('#typeInput').val(responseData.data.type);
                        $('#outlineInput').val(responseData.data.outline);
                        $('#imgUrlInput').val(responseData.data.img_url);
                        $('#linkUrlInput').val(responseData.data.link_url);
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                    }
                });
            }

            fetchAndDisplayProduct(); // 在页面加载时调用fetchAndDisplayProduct

            // 获取数量元素和增加减少按钮元素
            var numberElement = document.getElementById("number");
            var decreaseButton = document.getElementById("decrease");
            var increaseButton = document.getElementById("increase");

            // 初始数量为1
            var number = 1;

            // 增加按钮点击事件处理
            increaseButton.onclick = function() {
                number++;
                numberElement.innerHTML = number;
            };

            // 减少按钮点击事件处理
            decreaseButton.onclick = function() {
                if (number > 1) {
                    number--;
                    numberElement.innerHTML = number;
                }
            };

            // 立即购买按钮点击事件处理
            document.getElementById("buy").onclick = function() {
                // 创建一个form元素
                var formElement = document.createElement("form");
                formElement.action = "/add/order/good";
                formElement.method = "POST";

                // 创建商品名、价格和数量的input元素，并设置其属性和值
                var goodIdInput = document.createElement("input");
                goodIdInput.type = "hidden";
                goodIdInput.name = "good_id";
                goodIdInput.value = $('#goodIdInput').val();

                var nameInput = document.createElement("input");
                nameInput.type = "hidden";
                nameInput.name = "name";
                nameInput.value = $('#nameInput').val();

                var priceInput = document.createElement("input");
                priceInput.type = "hidden";
                priceInput.name = "price";
                priceInput.value = $('#priceInput').val();

                var numberInput = document.createElement("input");
                numberInput.type = "hidden";
                numberInput.name = "number";
                numberInput.value = number;

                var typeInput = document.createElement("input");
                typeInput.type = "hidden";
                typeInput.name = "type";
                typeInput.value = $('#typeInput').val();

                var outlineInput = document.createElement("input");
                outlineInput.type = "hidden";
                outlineInput.name = "outline";
                outlineInput.value = $('#outlineInput').val();

                var imgUrlInput = document.createElement("input");
                imgUrlInput.type = "hidden";
                imgUrlInput.name = "img_url";
                imgUrlInput.value = $('#imgUrlInput').val();

                var linkUrlInput = document.createElement("input");
                linkUrlInput.type = "hidden";
                linkUrlInput.name = "link_url";
                linkUrlInput.value = $('#linkUrlInput').val();

                // 将input元素添加到form元素中
                formElement.appendChild(goodIdInput);
                formElement.appendChild(nameInput);
                formElement.appendChild(priceInput);
                formElement.appendChild(numberInput);
                formElement.appendChild(typeInput);
                formElement.appendChild(outlineInput);
                formElement.appendChild(imgUrlInput);
                formElement.appendChild(linkUrlInput);

                // 将form元素添加到页面中，并提交表单
                document.body.appendChild(formElement);
                formElement.submit();
            };

            // 添加购物车按钮点击事件处理
            document.getElementById("addToCart").onclick = function() {
                // 创建一个form元素
                var formElement = document.createElement("form");
                formElement.action = "/add/car/good";
                formElement.method = "POST";

                // 创建商品名、价格和数量的input元素，并设置其属性和值
                var goodIdInput = document.createElement("input");
                goodIdInput.type = "hidden";
                goodIdInput.name = "good_id";
                goodIdInput.value = $('#goodIdInput').val();

                var nameInput = document.createElement("input");
                nameInput.type = "hidden";
                nameInput.name = "name";
                nameInput.value = $('#nameInput').val();

                var priceInput = document.createElement("input");
                priceInput.type = "hidden";
                priceInput.name = "price";
                priceInput.value = $('#priceInput').val();

                var numberInput = document.createElement("input");
                numberInput.type = "hidden";
                numberInput.name = "number";
                numberInput.value = number;

                var typeInput = document.createElement("input");
                typeInput.type = "hidden";
                typeInput.name = "type";
                typeInput.value = $('#typeInput').val();

                var outlineInput = document.createElement("input");
                outlineInput.type = "hidden";
                outlineInput.name = "outline";
                outlineInput.value = $('#outlineInput').val();

                var imgUrlInput = document.createElement("input");
                imgUrlInput.type = "hidden";
                imgUrlInput.name = "img_url";
                imgUrlInput.value = $('#imgUrlInput').val();

                var linkUrlInput = document.createElement("input");
                linkUrlInput.type = "hidden";
                linkUrlInput.name = "link_url";
                linkUrlInput.value = $('#linkUrlInput').val();

                // 将input元素添加到form元素中
                formElement.appendChild(goodIdInput);
                formElement.appendChild(nameInput);
                formElement.appendChild(priceInput);
                formElement.appendChild(numberInput);
                formElement.appendChild(typeInput);
                formElement.appendChild(outlineInput);
                formElement.appendChild(imgUrlInput);
                formElement.appendChild(linkUrlInput);

                // 将form元素添加到页面中，并提交表单
                document.body.appendChild(formElement);
                formElement.submit();
            };
        });
    });
</script>

</body>
</html>


//这是完成好的没有加head的商品详情页面